<script setup>

import {Star, View} from "@element-plus/icons-vue";
import { ref } from 'vue'
const radiusGroup = ref([
  {
    name: 'Large Radius',
    type: 'base',
  },
  {
    name: 'Round Radius',
    type: 'round',
  },
])
</script>

<template>
<!--<h1>美食资讯</h1>-->
  <div style="display: flex;justify-content: space-between;">
    <div style="font-size: 20px;font-family:'Microsoft YaHei' ;">互联网美食分享平台</div>
    <div><el-input
        v-model="input1"
        style="width: 150px"
        size="small"
        placeholder="Please Input"
        :suffix-icon="Search"
    /></div>
  </div>

  <div align="center" style="height: 40px">
    <el-button type="primary" disabled>Home</el-button>

    <router-link to="/communication/list">
      <el-button type="primary">美食交流</el-button>
    </router-link>
    <router-link to="/notice/list">
      <el-button type="primary">美食公告</el-button>
    </router-link>
    <router-link to="/info/list">
      <el-button type="primary">美食资讯</el-button>
    </router-link>
    <router-link to="/user/info">
      <el-button type="primary">个人账户</el-button>
    </router-link>
    <router-link to="/user/star">
      <el-button type="primary">个人收藏</el-button>
    </router-link>
    <router-link to="/show/list">
      <el-button type="primary">美食展示</el-button>
    </router-link>
  </div>
  <div style="height: 20px"></div>
  <div align="center">
       <table style="width: 90%; height: 50px;background-color: #c6e2ff ;font-size: 24px;font-family:'Microsoft YaHei';border-radius: 10px;">
         <tr>
           <td style="text-align: center">美食资讯</td>
         </tr>
       </table>
  </div>
  <div>
    <h1>筛选</h1>
    <el-button type="primary" plain>全部</el-button>
    <el-button type="primary" plain>餐饮</el-button>
    <h1>排序</h1>
    <el-button type="primary" plain>热度从高到低</el-button>
    <el-button type="primary" plain>热度从低到高</el-button>
    <el-button type="primary" plain>更新时间从高到低</el-button>
    <el-button type="primary" plain>更新时间从低到高</el-button>
  </div>
  <div style="height: 20px"></div>

  <div style="display: flex;justify-content: center;">

    <el-card style="max-width: 240px">
      <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          style="width: 100%"
      />美味汉堡<br>
      <el-icon><Star /></el-icon>25
      <el-icon><View /></el-icon>223<br>
      创建时间：2024-7-6

    </el-card>
    <div style="height: 20px"></div>
    <div style="width: 20px"></div>
    <el-card style="max-width: 240px">
      <img
          src="https://img1.baidu.com/it/u=3382106738,3155049567&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          style="width: 100%"
      />云南美食<br>
      <el-icon><Star /></el-icon>0
      <el-icon><View /></el-icon>73<br>
      创建时间：2024-7-6
    </el-card>

    <div style="width: 20px"></div>
    <el-card style="max-width: 240px">
      <img
          src="https://img0.baidu.com/it/u=2884754623,1958584677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          style="width: 100%"
      />新西兰羊排<br>
      <el-icon><Star /></el-icon>35
      <el-icon><View /></el-icon>441<br>
      创建时间：2024-7-9
    </el-card>
    <div style="width: 20px"></div>
    <el-card style="max-width: 240px">
      <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F21%2F20170421225317_uFJea.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723109910&t=8818b6edf3c4c5240f6b0ae6a38a3c25"
          style="width: 100%"
      />美食甜点<br>
      <el-icon><Star /></el-icon>57
      <el-icon><View /></el-icon>119<br>
      创建时间：2024-7-9
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.demo-radius .title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  margin: 10px 0;
}
.demo-radius .value {
  color: var(--el-text-color-primary);
  font-size: 16px;
  margin: 10px 0;
}
.demo-radius .radius {
  height: 40px;
  width: 70%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin-top: 20px;
}
</style>